* {
    padding: 0;
    margin: 0;
}

#one-one {
    display: flex;
    justify-content: center;
}

#one {
    width: 95%;
    height: 198px;
    border-radius: 10px;
}

#one>div {
    width: 100%;
    height: 66px;
    display: flex;

}

#one>div>div {
    width: 23%;
    border-right: #fff 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

#one>div:nth-child(1) {
    background: linear-gradient(to right, #fa5956, #fb8650 54%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}

#one>div:nth-child(2) {
    background: linear-gradient(to right, #4b8fed, #53bced);
    border-bottom: #fff 1px solid;
    border-top: #fff 1px solid;

}

#one>div:nth-child(3) {
    background: linear-gradient(to right, #34c2aa, #6cd557);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#one>div>div:nth-child(1) {
    width: 31%;
}

#one>div:nth-child(1)>div:nth-child(3) {
    width: 46%;
    background: linear-gradient(to right, #ffbc49, #ffd252);
    border-top-right-radius: 10px;

}

#one>div:nth-child(1)>div:nth-child(1) {
    background: url(../image/1-1.png) no-repeat right bottom;
    background-size: 73px auto;
}

#one>div:nth-child(1)>div:nth-child(3)>span:nth-child(1) {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../image/1-3.png) no-repeat left top;
    background-size: 166px auto;
    display: flex;
    justify-content: center;
    line-height: 66px
}

#one>div:nth-child(1)>div:nth-child(2) {
    background: url(../image/1-2.png) no-repeat left bottom;
    background-size: 23px auto;
}

#one>div:nth-child(2)>div:nth-child(1) {
    background: url(../image/2-1.png) no-repeat right bottom;
    background-size: 73px auto;
}

#one>div:nth-child(2)>div:nth-child(2) {
    background: url(../image/2-2.png) no-repeat left bottom;
    background-size: 33px auto;
}

#one>div:nth-child(3)>div:nth-child(1) {
    background: url(../image/3-1.png) no-repeat right bottom;
    background-size: 73px auto;
}

#one>div:nth-child(3)>div:nth-child(2) {
    background: url(../image/3-2.png) no-repeat left bottom;
    background-size: 73px auto;
}

#two-two {
    width: 95%;
    height: 110.06px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    margin-top: 11px;
}

#two-two li {
    list-style-type: none;
}

#two-two>div {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55.03px;

}

#two-two>div ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#two-two>div>ul>li:first-child {
    display: block;
    height: 28px;
    width: 28px;
}

#two-two>div:nth-child(1)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
}

#two-two>div:nth-child(2)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -28px;
}

#two-two>div:nth-child(3)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -56px;
}

#two-two>div:nth-child(4)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -84px;
}

#two-two>div:nth-child(5)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -112px;
}

#two-two>div:nth-child(6)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -140px;
}

#two-two>div:nth-child(7)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -168px;
}

#two-two>div:nth-child(8)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -196px;
}

#two-two>div:nth-child(9)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -280px;
}

#two-two>div:nth-child(10)>ul>li:first-child {
    background: url(../image/4-1.png) no-repeat;
    background-size: 28px auto;
    background-position: 0 -252px;
}

#there-there {
    width: 100%;
    height: 59.6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #333;
}

#there-there li {
    list-style-type: none;
}

#there-there>div {
    width: 33.3%;
    height: 100%;
    display: flex;

    justify-content: center;
    align-items: center;
}

#there-there ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#there-there>div img {
    width: 20px;
    height: 20px;
}
#one-one-one{
    width: 100%;
    height:255px;
    position: relative;
    display: flex;
    justify-content: center;
}
#one-one-one>div:first-child{
    width: 100%;
    height: 100%;
}
#one-one-one>div:first-child img{
    width: 100%;
    height: 80%;
}
#one-one-one>div:nth-child(2){
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    display: flex;
    
    justify-content:space-around;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    background: linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0));
}
#one-one-one li{
    list-style-type:none;
}
#one-one-one ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right:10px;
}
#one-one-one>div:nth-child(2)>div:first-child{
    flex-grow: 0.9;
    height: 28px;
    margin-left: 6px;
    background-color: #fff;
    border-radius: 14px; 
    box-sizing: border-box;
}
#one-one-one>div:nth-child(2)>div:first-child span{
    display: block;
    width: 35px;
    height: 28px;
    background: url(../image/5-1.png) no-repeat;
    background-position:7px 6.8px ;
    background-size: 22px;
    margin-left: 10px;
}
#one-one-one>div:nth-child(2)>div:first-child span::after{
    content: "搜索:目的地/酒店/景点/航班号";
    font-size: 10px;
    left:58px;
    top: 20px;
    color: #666;
    position: absolute;
}
#one-one-one>div:nth-child(3){
    width: 95%;
    height: 64px;
    background-color: #fff;
    top: 180px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #666;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}
#one-one-one>div:nth-child(3)>div{
    width: 25%;
}
#one-one-one>div:nth-child(3)>div li:first-child{
    height: 40px;
    width: 40px;
}
#one-one-one>div:nth-child(3)>div:nth-child(1) li:first-child{
    background: url(../image/7-1.png) no-repeat;
    background-size:40px auto;
}
#one-one-one>div:nth-child(3)>div:nth-child(2) li:first-child{
    background: url(../image/7-1.png) no-repeat;
    background-size:40px auto;
    background-position: 0 -40px;
}
#one-one-one>div:nth-child(3)>div:nth-child(3) li:first-child{
    background: url(../image/7-1.png) no-repeat;
    background-size:40px auto;
    background-position: 0 -80px;
}
#one-one-one>div:nth-child(3)>div:nth-child(4) li:first-child{
    background: url(../image/7-1.png) no-repeat;
    background-size:40px auto;
    background-position: 0 -120px;
}

